<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="../js/vue.js"></script>
    </head>
    <!-- 
        监视属性watch：
            1.当被监视的属性变化时，回调函数自动调用
            2.监视的属性存在才能进行监视
            3.监视的两种写法：
                1）创建vm时传入watch配置
                2）通过vm.$watch监视
     -->
    <body>
        <div id="root">
            <h2>今天天气很{{info}}</h2>
            <button @click="changeWeather()">切换天气</button>
        </div>
    </body>
    <script>
        Vue.config.productionTip = false;
      const vm =  new Vue({
            el: "#root",
            data: {
                isHot: true
            },
            methods: {
                changeWeather() {
                    this.isHot = !this.isHot;
                }
            },
            computed: {
                info: {
                    get() {
                        return this.isHot ? "炎热" : "凉爽";
                    }
                }
            },
           /*  watch:{
                info:{
                    immediate:true,
                    handler(newValue,oldValue){
                        console.log("isHot被修改",newValue,oldValue);
                    }
                }
            } */
        })
        vm.$watch("info",{
            immediate: true,
            handler(newValue, oldValue) {
                console.log("isHot被修改", newValue, oldValue);
            }
        })
    </script>

</html>